<template>
    <div>
        <div class="outmain ba_f">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>缓存设置</span>
                </div>
            </div>
            <el-form ref="form" :model="form" label-width="180px">
                <el-form-item label="Redis密码">
                    <el-input v-model="form.redis" placeholder="请输入Redis密码"></el-input>
                    <div class="yb_margin lh16">请输入Redis密码,Redis密码请在您的服务器扩展里面查询<span class="subjectcolor2 curs mar_l5" @click="tishiImg(1)">提示</span></div>
                </el-form-item>
                <el-form-item label="redis端口">
                    <el-input v-model="form.redispx" placeholder="请输入redis端口"></el-input>
                    <div class="yb_margin lh16">端口默认为6379</div>
                </el-form-item>
                <el-form-item label="Swoole端口">
                    <el-input v-model="form.swoole" placeholder="请输入Swoole端口" disabled></el-input>
                    <div class="yb_margin lh16">请先在阿里云或腾讯云或其他云服务器厂商后台开放9875端口，然后在宝塔控制面板开放9875端口<span class="subjectcolor2 curs mar_l5" @click="tishiImg(2)">提示</span></div>
                </el-form-item>
                <el-form-item label="ssl_certificate">
                    <el-input v-model="form.ssl_certificate" placeholder="请输入ssl_certificate"></el-input>
                    <div class="yb_margin lh16">请填写ssl_certificate证书路径 <span class="subjectcolor2 curs mar_l5" @click="tishiImg(3)">提示</span></div>
                </el-form-item>
                <el-form-item label="ssl_certificate_key">
                    <el-input v-model="form.ssl_certificate_key" placeholder="请输入ssl_certificate_key"></el-input>
                    <div class="yb_margin lh16">请填写ssl_certificate_key证书路径 <span class="subjectcolor2 curs mar_l5" @click="tishiImg(3)">提示</span></div>
                </el-form-item>
            </el-form>
        </div>
        <el-dialog title="操作提示" :visible.sync="dialogTableVisible4" :close-on-click-modal='false' width="1200px" class="tishidialog">
            <div class="t_c">
                <div v-show="tishiType=='1'" class="t_l">
                    <div class="t_l mar_b20">第一步：进入宝塔控制面板，点击软件商店，搜索redis，如果没有安装此扩展请先安装</div>
                    <img src="../../assets/img/manager/tishi5.png" class="mar_l20">
                    <div class="t_l mar_b20">第二步：点击设置，点击性能调整，设置redis密码，并将redis密码保存在下方即可，注意：密码请勿随便修改</div>
                    <img src="../../assets/img/manager/tishi1.png" class="mar_l20">
                </div>
                <div v-show="tishiType=='2'">
                    <div class="t_l mar_b20">第一步：去阿里云或腾讯云或其他云服务器厂商后台-安全组策略开放9875端口，保存即可</div>
                    <img src="../../assets/img/manager/tishi4.png">
                    <div class="t_l mar_b20">第二步：然后在宝塔控制面板开放9875端口，保存即可</div>
                    <img src="../../assets/img/manager/tishi3.png">
                </div>
                <div v-show="tishiType=='3'" class="t_l">
                    <div class="t_l mar_b20">进入宝塔控制面板，点击网站-站点设置-配置文件，找到以下ssl证书路径依次填写到下方，保存即可</div>
                    <img src="../../assets/img/manager/tishi2.png" class="mar_l20">
                </div>
            </div>
        </el-dialog>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button  @click="submitForm1('1')">检测</el-button>
            <el-button type="primary" @click="submitForm">保存</el-button>
        </div>
    </div>
</template>
<script>
    import {getcacheSet,PostcacheSet} from "@/api/setup";
    export default {
        created() {
            this.bus.$emit('loading', true);
            this.init();
        },
        components: {},
        data() {
            return {
                form: {
                    redis: '',
                    swoole: '9875',
                    redispx: '6379',
                    ssl_certificate: '',
                    ssl_certificate_key: '',
                    type: '',
                },
                dialogTableVisible4:false,
                tishiType:'',
            }
        },
        methods: {
            async init() {
                const {data} = await getcacheSet();
                this.form2 = this.form
                this.form = Object.assign(this.form2, data);
                this.bus.$emit('loading', false)
            },
            async submitForm1(type){
                this.form.type=type
                const {msg} = await PostcacheSet(this.form);
                this.$baseMessage(msg, "success");
                this.init();
            },
            tishiImg(type){
                this.tishiType = type
                this.dialogTableVisible4 = true
            },
            submitForm() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        this.form.type=''
                        const {msg} = await PostcacheSet(this.form);
                        this.$baseMessage(msg, "success");
                        this.init();
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>
